import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { Utils } from 'tuya-panel-kit';
import Strings from '../../i18n';
import dpCodes from '../../config/dpCodes';
import { store } from '../../redux/configureStore';

const { convertX: cx, convertY: cy } = Utils.RatioUtils;

const { scaleNumber } = Utils.NumberUtils;

const { scaleString } = Utils.StringUtils;

const {
  power: powerCode,
  mode: modeCode,
  tempSet: tempSetCode,
  tempCurrent: tempCurrentCode,
  // pm25: pm25Code,
  airQuality: airQualityCode,
  filter: filterCode, // 滤芯剩余提示
} = dpCodes;

class MainCenterTip extends Component {
  static propTypes = {
    power: PropTypes.bool,
    mode: PropTypes.string,
    tempSet: PropTypes.number,
    tempCurrent: PropTypes.number,
    pm25: PropTypes.number,
    airQuality: PropTypes.string,
    filter: PropTypes.number,
  };

  static defaultProps = {
    power: false,
    mode: 'cold',
    tempSet: 26,
    tempCurrent: 26,
    pm25: 0,
    airQuality: '1',
    filter: 0,
  };

  getTempSetValue() {
    const { tempSet } = this.props;
    const { devInfo = {} } = store.getState();
    const { scale = 0 } = devInfo.schema[tempSetCode];
    console.log(store.getState());
    console.log(this.props);
    return scaleNumber(scale, tempSet);
  }

  // 弃用
  calFontSize(str) {
    const len = typeof str === 'number' ? `${str}`.length : str.length;
    return len > 4 ? cx(Math.max(32, 64 - (len - 4) * 7)) : cx(64);
  }

  render() {
    const { power, mode, tempSet, tempCurrent } = this.props;
    if (!power) {
      return (
        <View style={styles.container}>
          <Text style={[styles.text, styles.text__title, { fontSize: cx(36) }]}>
            {Strings.getLang('powerOffTip')}
          </Text>
        </View>
      );
    }

    // console.log(store.getState());
    // console.log(this.props);

    const centerText = mode === 'cold' ? `${tempSet}℃` : `${tempCurrent}℃`;
    const bottomText = mode === 'cold' ? `${Strings.tempCurTip} ${tempCurrent}℃` : `当前温度`;
    let modeText;
    if (mode === 'cold') {
      modeText = '制冷';
    } else if (mode === 'dry') {
      modeText = '除湿';
    } else {
      modeText = '送风';
    }
    return (
      <View style={styles.container}>
        {/* {(pm25Code || airQualityCode) && (
          <Text style={styles.text}>{Strings.getLang(pm25Code ? 'pm25' : 'airQuality')}</Text>
        )} */}

        <Text style={styles.text}>{modeText}</Text>

        {/* 当前温度或者设定温度 */}
        {tempSetCode && (
          <Text
            accessibilityLabel="HomeScene_MainView_Value"
            numberOfLines={1}
            style={[
              styles.text__title,
              // {
              //   fontSize: this.calFontSize(mode),
              // },
            ]}
          >
            {centerText}
          </Text>
        )}

        {
          // 当前温度
          <Text style={[styles.text__dimmed]}>{bottomText}</Text>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    width: cx(250),
    height: cx(250),
    backgroundColor: 'transparent',
    paddingVertical: cy(56),
    marginVertical: cy(10),
  },

  text: {
    fontSize: Math.max(16, cx(16)),
    color: '#4296F5',
    // backgroundColor: '#4296F5',
    marginBottom: 5,
  },

  text__title: {
    width: cx(180),
    fontSize: cx(34),
    fontWeight: '500',
    textAlign: 'center',
    color: '#4296F5',
    // backgroundColor: '#4296F5',
  },

  text__dimmed: {
    fontSize: Math.round(Math.max(12, cx(12))),
    lineHeight: Math.round(Math.max(18, cx(18))),
    color: '#4296F5',
    // backgroundColor: '#4296F5',
    marginTop: 5,
  },
});

export default connect(({ dpState }) => ({
  power: dpState[powerCode],
  // pm25: dpState[pm25Code],
  mode: dpState[modeCode],
  tempSet: dpState[tempSetCode],
  tempCurrent: dpState[tempCurrentCode],
  airQuality: dpState[airQualityCode],
  filter: dpState[filterCode],
}))(MainCenterTip);
